<template>
  <div class="chooseIcons">
    <el-popover v-model="visible" placement="bottom" width="450" trigger="click">
        <span
          slot="reference"
          style="display: inline-block;width: 200px;height: 33px;line-height: 33px;"
        >
          <i :class="userChooseIcon"></i>
          {{ userChooseIcon }}
        </span>
      <div class="iconList">
        <i
          v-for="item in iconList"
          :key="item"
          :class="item"
          @click="setIcon(item)"
          style="font-size: 20px"
        ></i>
      </div>
    </el-popover>
  </div>
</template>

<script>
  import {elementIcons} from "@/utils/icons";
  export default {
    name: "MyIcon",
    data(){
      return{
        iconList:[],//icon图标列表
        userChooseIcon:"",//用户选中的图标
        visible:false
      }
    },
    created() {
      this.getIconList();
    },
    methods:{
      //获取图标
      getIconList(){
        this.iconList = elementIcons;
      },
      //icon绑定点击事件
      setIcon(icon){
        this.userChooseIcon = icon;//将i的样式设置为选中的样式:el-icon-xxx
        //选中的图标传给父组件
        this.$emit('selecticon',icon);
        this.visible = !this.visible;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .iconList {
    width: 400px;
    height: 300px;
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    i {
      display: inline-block;
      width: 60px;
      height: 45px;
      color: #000000;
      font-size: 20px;
      border: 1px solid #e6e6e6;
      border-radius: 4px;
      cursor: pointer;
      text-align: center;
      line-height: 45px;
      margin: 5px;
      &:hover {
        color: orange;
        border-color:orange;
      }
    }
  }
  .chooseIcons{
    width: 175px;
    background-color: #FFFFFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 33px;
    line-height: 25px;
    outline: none;
    padding: 0 15px;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
</style>
